import Vue from "vue";
import VueRouter from "vue-router";

// import Home from "../views/Home.vue";
import MdiSearch from "../views/MdiSearch.vue";
import AspectRatios from "../views/AspectRatios.vue";
import Avatar from "../views/Avatar.vue";
import Badges from "../views/Badges.vue";
import Banner from "../views/Banner.vue";
import BottomNavigation from "../views/BottomNavigation.vue";
import BottomSheets from "../views/BottomSheets.vue";
import Breadcrumbs from "../views/Breadcrumbs.vue";
import Buttons from "../views/Buttons.vue";


Vue.use(VueRouter);

const ColorClassSearch = () => import(/* webpackChunkName: "ColorClassSearch" */ '../views/ColorClassSearch.vue')

const NavDrawer = () => import(/* webpackChunkName: "NavDrawer" */ '../views/NavDrawer.vue')  //这里是路由时加载的意思， /* webpackChunkName: "group-foo" */是指打包去的文件名
const AppBars = () => import(/* webpackChunkName: "AppBars" */ '../views/AppBars.vue')
const ToolBars = () => import(/* webpackChunkName: "ToolBars" */ '../views/ToolBars.vue')
const SystemBars = () => import(/* webpackChunkName: "SystemBars" */ '../views/SystemBars.vue')

const Alerts = () => import(/* webpackChunkName: "SystemBars" */ '../views/Alerts.vue')

let componentsgroup = "/components"

const routes = [
  // {
  //   path: "/",
  //   name: "Home",
  //   component: Home,
  // },
  // {
  //   path: "/about",
  //   name: "About",
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () =>
  //     import(/* webpackChunkName: "about" */ "../views/About.vue"),
  // },
  {
    path: "/style-and-animations/mdi-icon-search",
    name: "mdi-icon-search",
    component: MdiSearch,
  },
  {
    path: "/style-and-animations/color-class-search",
    name: "color-class-search",
    component: ColorClassSearch,
  },
  {
    path: componentsgroup + "/navigation-drawers",
    name: "navigation-drawers",
    component: NavDrawer,
  },
  {
    path: componentsgroup + "/app-bars",
    name: "app-bars",
    component: AppBars,
  },
  {
    path: componentsgroup + "/tool-bars",
    name: "tool-bars",
    component: ToolBars,
  },
  {
    path: componentsgroup + "/system-bars",
    name: "system-bars",
    component: SystemBars,
  },
  {
    path: componentsgroup + "/alerts",
    name: "alerts",
    component: Alerts,
  },
  {
    path: componentsgroup + "/aspect-ratios",
    name: "aspect-ratios",
    component: AspectRatios,
  },
  {
    path: componentsgroup + "/avatar",
    name: "avatar",
    component: Avatar,
  },
  {
    path: componentsgroup + "/badges",
    name: "badges",
    component: Badges,
  },
  {
    path: componentsgroup + "/banner",
    name: "banner",
    component: Banner,
  },
  {
    path: componentsgroup + "/bottom-navigation",
    name: "bottom-navigation",
    component: BottomNavigation,
  },
  {
    path: componentsgroup + "/bottom-sheets",
    name: "bottom-sheets",
    component: BottomSheets,
  },
  {
    path: componentsgroup + "/breadcrumbs",
    name: "breadcrumbs",
    component: Breadcrumbs,
  },
  {
    path: componentsgroup + "/buttons",
    name: "buttons",
    component: Buttons,
  },
];

const router = new VueRouter({
  routes,
});

export default router;
